<template>
  <div class="comment-ticket">
    <van-nav-bar
      title="立即评价"
      left-arrow
      @click-left="goBack"
			fixed
			placeholder 
			z-index=10
    />
		<div class="uploader">
			<van-uploader v-model="fileList" multiple />
		</div>
		<van-rate v-model="rateValue" />
		<div class="comment-text">
			<textarea class="comment-content" placeholder="多多描述商品和使用感受哦" v-model="commentContent"></textarea>
		</div>
		<div class="sumit-btn">
			<van-button type="primary" block color="rgb(235, 99, 18)" @click="submit">提交评价</van-button>
		</div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "commentTicket",
  data() {
    return {
			fileList:[],
			commentContent:'',
			rateValue:0
		};
  },
  computed: {
    ...mapState(["commentTicketData"]),
  },
  activated() {
    console.log(this.commentTicketData);
  },
  methods: {
		goBack() {
			this.$router.go(-1)
		},
		submit() {
			this.commentTicketData.isCommented = true;
      this.commentTicketData.isComment = false;
			this.commentTicketData.imgs=this.fileList;
			this.commentTicketData.content=this.commentContent;
			this.commentTicketData.rate=this.rateValue;
      let commentedData = JSON.parse(localStorage.getItem("commentedData"));
      let commentTicket = JSON.parse(localStorage.getItem("commentTicket"));
			for (let i=0;i<commentTicket.length;i++) {
				if (commentTicket[i].id==this.commentTicketData.id) {
					commentTicket.splice(i,1)
					localStorage.setItem('commentTicket',JSON.stringify(commentTicket))
					break;
				}
			}
      if (!commentedData) {
        let arr = [];
        arr.push(this.commentTicketData);
        localStorage.setItem("commentedData", JSON.stringify(arr));
      } else {
        let idArr = [];
        commentedData.forEach((item) => {
          idArr.push(item.id);
        });
        if (idArr.indexOf(this.commentTicketData.id) == -1) {
          commentedData.push(this.commentTicketData);
          localStorage.setItem("commentedData", JSON.stringify(commentedData));
        }
      }
			this.$router.push({name:'TicketView',params:{index:0}})
		},
	},
};
</script>

<style lang="scss" scoped>
.comment-ticket {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
	::v-deep .van-nav-bar__arrow {
		color: #000;
		font-size: 20px;
	}
	.uploader{
		border-bottom: 1px solid #ddd;
		padding-left: 15px;
		margin-bottom: 10px;
	}
	.comment-content{
		width: 100vw;
		height: 250px;
		position: relative;
		border-left: none;
		border-right: none;
		padding: 10px;
		box-sizing: border-box;
		margin-bottom: 10px;
		font-size: 15px;
		margin-top: 10px;
	}
	.sumit-btn{
		padding: 0 10px;
	}
}
</style>